<template>
  <div
    class="antd-container"
    style="width: 100vw; height: calc(100vh - 70px); border: 1px solid #000"
  >
    <a-row style="height: 300px">
      <a-col :span="12">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <!-- vue3 v-model可以传递参数 -->
          <a-form-item label="Username" name="username">
            <a-input v-model:value="formState.username" />
          </a-form-item>
          <a-form-item label="Password" name="password">
            <a-input v-model:value="formState.password" />
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" html-type="submit">Submit</a-button>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="12">
        <a-input v-model:value="formState.value" placeholder="Basic usage" />
      </a-col>
    </a-row>

    <span v-for="item in formState.list" :key="item.id">{{}}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, watch } from 'vue'
import { debounce } from 'lodash'

interface FormState {
  username: string
  password: string
  remember: boolean
  value: string
  list: any[]
}

const myFormData = {
  username: 'devin',
  password: '123'
}

export default defineComponent({
  setup() {
    const formState = reactive<FormState>({
      username: '',
      password: '',
      remember: true,
      value: '',
      list: [{ id: 1 }, { id: 2 }]
    })
    // 在vue3中通过watch使用防抖函数
    watch(
      () => formState.value,
      debounce((v) => {
        console.log(v, 'v')
      }, 2000)
    )

    // vue表单设置数据，直接赋值即可
    setTimeout(() => {
      formState.username = myFormData.username
      formState.password = myFormData.password
    }, 3000)

    const onFinish = (values: any) => {
      console.log('Success:', values)
    }

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo)
    }
    return {
      formState,
      onFinish,
      onFinishFailed
    }
  }
})
</script>

<style></style>
